<!--  import jQueryUI -->
<link rel="stylesheet" type="text/css"
    href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<link rel="stylesheet" type="text/css"
    href="/modules/skill_map/resources/css/lesson_header.css">
<script src="/modules/skill_map/resources/js/lesson_header.js"></script>

<link rel="stylesheet" type="text/css"
    href="/modules/dashboard/resources/material-design-icons/css/material-design-iconic-font.min.css">
<link rel="stylesheet" type="text/css"
    href="/modules/skill_map/resources/css/common.css">

{% import 'skill_card.html' as skill_card %}

{% include 'lesson_title.html' %}

{% if skills %}
  <div class="skill-panel" data-dependency-map="{{ dependency_map }}">
    <div class="margins skills-in-this-lesson">
      {# I18N: Header describing the skills for this lesson #}
      <span class="section-title">{{ gettext('Taught in this lesson:') }}</span>
      <ol class="skill-display-root">
        {% for skill in skills %}
          <li class="skill {{ skill.score_level }}"
            data-skill-id="{{ skill.id }}"
            data-skill-description="{{ skill.description }}"
            {% if skill.score %}
              data-skill-score="{{ skill.score }}"
            {% endif %}>
            {{ skill.name }}
          </li>
        {% endfor %}
      </ol>
    </div>

    <div class="skill-details">
      <div class="margins">

        {% if display_skill_level_legend %}
          {{ skill_card.display_proficiency_legend() }}
        {% endif %}

        <div>
          {# I18N: Header describing list of skills this lesson depends on #}
          <span class="section-title">{{ gettext('Depends on:') }}</span>
          {% if not depends_on_skills %}
            <span class="empty-skill-list-message">
              {# I18N: Describe an empty set of prerequisite skills #}
              {{ gettext('This lesson doesn\'t have any prerequisites.') }}
            </span>
          {% endif %}
        </div>
        {% if depends_on_skills %}
          <ol class="depends-on skill-display-root">
            {% for skill in depends_on_skills %}
              {{ skill_card.display(skill) }}
            {% endfor %}
          </ol>
        {% endif %}
      </div>
      <div class="margins">
        <div>
          {# I18N: Header describing list of skills this lesson leads to #}
          <span class="section-title">{{ gettext('Leads to:') }}</span>
          {% if not leads_to_skills %}
            <span class="empty-skill-list-message">
              {# I18N: Describe an empty set of follow-on skills #}
              {{ gettext('This lesson isn\'t a prerequisite for any other skills.') }}
            </span>
          {% endif %}
        </div>
        {% if leads_to_skills %}
          <ol class="leads-to skill-display-root">
            {% for skill in leads_to_skills %}
              {{ skill_card.display(skill) }}
            {% endfor %}
          </ol>
        {% endif %}
      </div>
    </div>
    <div class="open-control">
      <button class="md"></button>
    </div>
  </div>
{% endif %}
